<template>
  <div class="app-container">
    <div class="clearfix">
      <div class="app-container-menus">
        <el-menu
          default-active="/system/ui_edit"
          :router="true"
          class="el-menu-vertical-demo"
        >
          <el-menu-item index="/system/ui_edit">
            <i class="el-icon-menu"></i>
            <span slot="title">个人中心</span>
          </el-menu-item>
          <el-menu-item index="/system/ui_album">
            <i class="el-icon-document"></i>
            <span slot="title">主题专区</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div>
        <div class="menu_setting_area" v-loading="isLoading">
          <div class="menu_preview_area">
            <div class="mobile_menu_preview">
              <div class="mobile_hd">会员中心</div>
              <div class="mobile_bd" ref="stage">
                <div class="swiper">
                  <div class="mint-swipe banners">
                    <div class="mint-swipe-items-wrap">
                      <div class="mint-swipe-item is-active">
                        <img
                          src="http://weixin-ostorage01.oss-cn-shenzhen.aliyuncs.com/oss-image/721499171533115190620.jpg"
                          alt="浦发图"
                        >
                      </div>
                    </div>
                    <div class="mint-swipe-indicators">
                      <div class="mint-swipe-indicator is-active"></div>
                    </div>
                  </div>
                  <div class="topbar-img"></div>
                </div>
                <div class="horizontal-center">
                  <draggable
                    v-model="icons"
                    @start="draggablestart"
                    :options="{animation: 150,draggable:'.box1'}"
                    @end="draggablend"
                  >
                    <div class="box1" v-if="!icon.type" v-for="(icon,index) in icons" :key="index">
                      <div class="rel ib" :class="icon.imgClass">
                        <xd-img
                          class="xdicon"
                          :class="icon.iconClass"
                          v-if="icon.iconType!==1"
                          :src="imgIcon(icon)"
                          alt
                        />
                      </div>
                      <div class="box1-txt">{{icon.titleType!==1?icon.title||"&nbsp;":'&nbsp;'}}</div>
                      <div class="box1-pen" @click="toggleTopSelectedItem(icon)"></div>
                    </div>
                    <div class="box1" @click="toggleTopSelectedItem(icon)" v-else-if="icon.type==1">
                      <div class="box1-num">{{icon.value}}</div>
                      <div class="box1-txt">{{icon.titleType!==1?icon.title||"&nbsp;":'&nbsp;'}}</div>
                      <div class="box1-pen" @click="toggleTopSelectedItem(icon)"></div>
                    </div>
                    <div class="box1" @click="toggleTopSelectedItem(icon)" v-else-if="icon.type==2">
                      <div class="rel ib">
                        <xd-img
                          :src="imgIcon(icon)"
                          alt
                          :style="icon.style"
                          :class="icon.imgClass"
                        />
                        <div class="tip-count" v-if="icon.value">{{icon.value}}</div>
                      </div>
                      <div class="box1-txt">{{icon.titleType!==1?icon.title||"&nbsp;":'&nbsp;'}}</div>
                      <div class="box1-pen" @click="toggleTopSelectedItem(icon)"></div>
                    </div>
                  </draggable>
                </div>
                <div class="swpier2">
                  <div class="bottombar-img"></div>
                  <div class="mint-swipe banners2">
                    <div class="mint-swipe-items-wrap">
                      <div class="mint-swipe-item">
                        <img
                          src="http://weixin-ostorage01.oss-cn-shenzhen.aliyuncs.com/oss-image/42449801533173075275.jpg"
                        >
                      </div>
                    </div>
                    <div class="mint-swipe-indicators">
                      <div class="mint-swipe-indicator"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="toolbar-area">
              <el-button type="danger" @click="resetAll" icon="el-icon-refresh" size="mini">恢复初始设置</el-button>
              <el-button
                type="primary"
                @click="resetSortList"
                icon="el-icon-refresh"
                size="mini"
              >恢复排序</el-button>
            </div>
          </div>
          <div class="menu_form_area" v-if="currentSelectedItem">
            <div class="portable_editor to_left">
              <div class="editor_inner">
                <div class="global_mod float_layout menu_form_hd js_second_name_bar">
                  <h4 class="global_info">导航项</h4>
                  <!-- <div class="global_extra">
                <a @click="doDeleteMenu" href="javascript:void(0);">删除导航项</a>
                  </div>-->
                </div>
                <div class="menu_form_bd">
                  <div class="menu_holder">
                    <div class="label">导航项名称</div>
                    <div class="label-content">
                      <el-input
                        class="label-content-input"
                        placeholder="请输入导航项名称"
                        v-model="currentSelectedItem.title"
                      ></el-input>
                      <div
                        class="label-content-error"
                        v-if="!currentSelectedItem.title || !currentSelectedItem.title.trim()"
                      >请输入导航项名称</div>
                      <!-- <div class="label-content-tip">字数不超过8个字</div> -->
                    </div>
                  </div>
                  <div class="menu_holder">
                    <div class="label label-n">标题样式</div>
                    <div class="label-content">
                      <el-radio-group v-model="currentSelectedItem.titleType">
                        <el-radio :label="0">默认</el-radio>
                        <!-- <el-radio :label="1">隐藏</el-radio> -->
                        <!-- <el-radio :label="2">自定义</el-radio> -->
                      </el-radio-group>
                    </div>
                  </div>
                  <div class="menu_holder">
                    <div class="label label-n">图标样式</div>
                    <div class="label-content">
                      <el-radio-group v-model="currentSelectedItem.iconType">
                        <el-radio :label="0">默认</el-radio>
                        <!-- <el-radio :label="1">隐藏</el-radio> -->
                        <el-radio :label="2">自定义</el-radio>
                      </el-radio-group>
                      <div class="img-edit-area" v-if="currentSelectedItem.iconType===2">图片：
                        <el-upload
                          class="avatar-uploader"
                          :action="UPLOAD_URL"
                          :show-file-list="false"
                          :on-success="handleUploadCoverSuccess"
                          :before-upload="beforeAvatarUpload"
                        >
                          <img
                            v-if="currentSelectedItem.customIcon"
                            :src="currentSelectedItem.customIcon|absUrl"
                            class="custom-icon"
                          >
                          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                      </div>
                    </div>
                  </div>
                  <div class="menu_holder">
                    <div class="label label-n">跳转方式</div>
                    <div class="label-content">
                      <el-radio-group v-model="currentSelectedItem.routerType">
                        <el-radio :label="0">不跳转</el-radio>
                        <el-radio :label="1">调用功能</el-radio>
                        <el-radio :label="2">跳转</el-radio>
                      </el-radio-group>
                      <div class="img-edit-area">
                        <div v-if="currentSelectedItem.routerType===1">调用功能：
                          <el-select v-model="currentSelectedItem.func">
                            <el-option value="qrcode" label="会员二维码"></el-option>
                          </el-select>
                        </div>
                        <div v-if="currentSelectedItem.routerType===2">跳转链接：
                          <el-input
                            class="label-content-input"
                            placeholder="请输入链接地址"
                            v-model="currentSelectedItem.link"
                          ></el-input>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <span class="editor_arrow_wrp">
                <i class="editor_arrow editor_arrow_out"></i>
                <i class="editor_arrow editor_arrow_in"></i>
              </span>
            </div>
          </div>
        </div>
        <div class="toolbar">
          <el-button type="success" @click="saveAndSubmit" :loading="isLoading" size="mini">保存并发布</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import './main.scss'
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data () {
    return {
      currentSelectedItem: null,
      billData: {},
      userinfo: {},
      isLoading: false,
      menus: [],
      icons: [
        {
          title: '个人中心',
          customIcon: '',
          iconType: 0,
          isWxAvatar: true,
          routerType: 2,
          titleType: 0,
          imgClass: 'avartar-img-wrapper',
          link: '/center',
          iconClass: 'avartar-img',
          imgSrc: ''
        },
        {
          title: '会员二维码',
          customIcon: '',
          iconType: 0,
          titleType: 0,
          link: '',
          routerType: 1,
          func: 'qrcode',
          imgClass: 'user-qrcode',
          imgSrc:
            ''
        },
        {
          title: '会员商城',
          customIcon: '',
          routerType: 2,
          iconType: 0,
          titleType: 0,
          link: '/shop',
          imgClass: 'user-qrcode',
          imgSrc:
            ''
        },
        {
          title: '主题专区',
          imgClass: 'user-qrcode',
          iconType: 0,
          link: '/album',
          routerType: 2,
          customIcon: '',
          titleType: 0,
          imgSrc:
            ''
        },
        {
          title: '积分',
          value: 0,
          link: '/mypointscard',
          routerType: 2,
          cutPoint: 'userinfo.points',
          customIcon: '',
          iconType: 0,
          titleType: 0,
          type: 1 // 分数类型
        },
        {
          title: '电子券',
          customIcon: '',
          value: 0,
          cutPoint: 'userinfo.ticketCount',
          fieldName: 'points',
          link: '/dzj',
          routerType: 2,
          iconType: 0,
          titleType: 0,
          type: 1 // 分数类型
        },
        {
          title: '发票',
          iconType: 0,
          link: '/myinvoices',
          cutPoint: 'userinfo.invoiceCount',
          routerType: 2,
          customIcon: '',
          value: 0,
          titleType: 0,
          type: 1 // 分数类型
        },
        {
          title: '收藏',
          routerType: 2,
          customIcon: '',
          iconType: 0,
          cutPoint: 'userinfo.collectionCount',
          value: 0,
          link: '/collections',
          titleType: 0,
          type: 1 // 分数类型
        },
        {
          title: '待付款',
          routerType: 2,
          value: 0,
          cutPoint: 'billData.waitPayCount|numFormat',
          type: 2,
          customIcon: '',
          iconType: 0,
          link: '/bill?type=0',
          titleType: 0,
          imgClass: 'user-qrcode2',
          style: 'background-size:0.6rem auto',
          imgSrc:
            ''
        },
        {
          title: '待收货',
          type: 2,
          iconType: 0,
          routerType: 2,
          cutPoint: 'billData.waitReceiveCount|numFormat',
          customIcon: '',
          link: '/bill?type=2',
          imgClass: 'user-qrcode2',
          titleType: 0,
          value: 0,
          style: 'background-size:0.6rem auto',
          imgSrc:
            ''
        },
        {
          title: '待评价',
          type: 2,
          iconType: 0,
          routerType: 2,
          link: '/bill?type=4',
          customIcon: '',
          cutPoint: 'billData.waitCommentCount|numFormat',
          titleType: 0,
          value: 0,
          imgClass: 'user-qrcode2',
          style: 'background-size:0.6rem auto',
          imgSrc:
            ''
        },
        {
          title: '全部订单',
          type: 2,
          iconType: 0,
          value: 0,
          customIcon: '',
          titleType: 0,
          routerType: 2,
          link: '/bill',
          imgClass: 'user-qrcode2',
          style: 'background-size:0.6rem auto',
          imgSrc:
            ''
        },
        {
          title: '客服中心',
          type: 2,
          value: 0,
          titleType: 0,
          routerType: 2,
          customIcon: '',
          link: '/customer_service',
          iconType: 0,
          imgClass: 'user-qrcode2',
          style: 'background-size:0.6rem auto',
          imgSrc:
            ''
        },
        {
          title: '我的消费',
          type: 2,
          iconType: 0,
          routerType: 2,
          customIcon: '',
          imgClass: 'user-qrcode2',
          value: 0,
          titleType: 0,
          link: '/costlist',
          style: 'background-size:0.6rem auto',
          imgSrc:
            ''
        },
        {
          title: '我的消息',
          type: 2,
          routerType: 2,
          cutPoint: 'userinfo.unReadMsgCount|numFormat',
          iconType: 0,
          customIcon: '',
          value: 0,
          titleType: 0,
          link: '/mymsg',
          imgClass: 'user-qrcode2',
          style: 'background-size:0.6rem auto',
          imgSrc:
            ''
        },
        {
          title: '我的设置',
          type: 2,
          value: 0,
          titleType: 0,
          link: '/settings',
          routerType: 2,
          customIcon: '',
          iconType: 0,
          imgClass: 'user-qrcode2',
          style: 'background-size:0.6rem auto',
          imgSrc:
            ''
        }
      ]
    }
  },
  mounted () {
    const stage = this.$refs.stage
    stage.addEventListener(
      'mouseout',
      evt => {
        const target = this.findBox1(evt.target)
        if (target == null) {
          return
        }
        this.onMouseLeave(target)
        // if (!this.hasParent(evt.toElement, target)) {

        // }
      },
      false
    )
    stage.addEventListener(
      'mouseover',
      evt => {
        const target = this.findBox1(evt.target)
        if (target == null) {
          return
        }
        this.onMouseEnter(target)
      },
      false
    )
    // dom.addEventListener('mouseleave', this.onMouseLeave.bind(this), false)
    // dom.addEventListener('mouseenter', this.onMouseEnter.bind(this), false)
  },
  created () {
    this.checkLogin()
    document.documentElement.style.fontSize = 414 / 10 + 'px'
    document.body.fontSize = '14px'
    this.loadIcons()
  },
  methods: {
    handleOpen (evt) {
      console.log(evt)
    },
    handleClose () {

    },
    draggablestart () {
      if (!this.oldSortedIcons) {
        this.oldSortedIcons = []
        this.icons.forEach(el => {
          this.oldSortedIcons.push(Object.assign({}, el))
        })
      }
    },
    resetSortList () {
      this.$$comfirm('确认恢复排序吗', r => {
        if (this.oldSortedIcons) {
          this.icons = this.oldSortedIcons
        }
      })
    },
    resetAll () {
      this.$$comfirm('确认恢复初始设置吗', r => {
        if (this.oldIcons) {
          this.icons = this.oldIcons
        }
      })
    },
    hasParent (dom, parentDom) {
      while (true) {
        if (!dom || dom === document) {
          return false
        }
        if (dom === parentDom) {
          return true
        }
        dom = dom.parentElement
      }
    },
    findBox1 (dom) {
      while (true) {
        if (!dom || dom === document) {
          return null
        }
        if (dom.classList.contains('box1')) {
          return dom
        }
        dom = dom.parentElement
      }
    },
    imgIcon (icon) {
      if (icon.iconType === 2) {
        return this.imgUrl(icon.customIcon || icon.imgSrc)
      }
      return icon.imgSrc
    },
    onMouseEnter (target) {
      if (!target.classList.contains('active')) {
        target.classList.add('active')
      }
    },
    onMouseLeave (target) {
      if (target.classList.contains('active')) {
        target.classList.remove('active')
      }
    },
    loadIcons () {
      this.oldIcons = []
      this.icons.forEach(el => {
        this.oldIcons.push(Object.assign({}, el))
      })
      this.isLoading = true
      this.$get('/admin/custom-page-setting/query-by-page-id', { pageId: 1 })
        .then(data => {
          this.isLoading = false
          if (data && data.setting) {
            const settings = JSON.parse(data.setting)
            this.icons = settings.icons
          }
        })
        .catch(_ => {
          this.isLoading = false
        })
    },
    handleUploadCoverSuccess (res) {
      if (res.errcode === 0) {
        this.currentSelectedItem.customIcon = res.info
      } else {
        this.$message.error(res.msg)
      }
    },
    checkLogin () {
      this.$get('/admin/admin/check_login')
    },
    doDeleteMenu () {
      this.$$comfirm('确定删除该导航项吗?', r => {
        // 主导航项
        this.menus.every((el, idx) => {
          if (el === this.currentSelectedItem) {
            this.menus.splice(idx, 1)
            this.currentSelectedItem = null
            return false
          }
          return true
        })
      })
    },
    toggleSubSelectedItem (item) {
      this.currentSelectedItem = item
    },
    toggleTopSelectedItem (item) {
      this.menus.forEach(el => (el.selected = false))
      item.selected = true
      this.currentSelectedItem = item
    },
    draggablend (evt) {},
    addSubMenu (item) {
      if (!item.subButtons) {
        item.subButtons = []
      }
      item.subButtons.push({
        name: '导航项名称',
        type: 'view'
      })
      this.currentSelectedItem = item.subButtons[item.subButtons.length - 1]
    },
    saveAndSubmit () {
      this.isLoading = true
      this.$post('/admin/custom-page-setting/save-setting', {
        setting: JSON.stringify({ icons: this.icons }),
        pageId: 1
      })
        .then(data => {
          this.isLoading = false
          this.$$notify('发布成功')
        })
        .catch(_ => {
          this.isLoading = false
        })
    }
  }
}
</script>

<style scoped  lang="scss">
.sub_pre_menu_list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mobile_bd /deep/ .active {
  border: 1px dashed #999;
}

.mobile_bd /deep/ .active .box1-pen {
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: #000;
  cursor: pointer;
  width: 22px;
  height: 22px;
  background-image: url("../../assets/wechat/pen.png");
  background-position: 5px 5px;
  background-size: 12px auto;
  background-repeat: no-repeat;
}
.mobile_bd /deep/ .active .box1-pen:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.menu_setting_area:after {
  clear: both;
  content: "\200B";
  display: block;
  height: 0;
}

.tip-count {
  position: absolute;
  right: -0.12rem;
  top: -0.05rem; // width: 0.36rem;
  color: #f20b01; // border: 1px solid #f20b01;
  height: 0.36rem;
  line-height: 0.36rem;
  font-size: 0.3rem;
  text-align: center; // border-radius: 50%;
  // background-color: #fff;
  color: #f20b01;
}

.user-qrcode2 {
  width: 0.8rem;
  height: 0.8rem;
}
.app-container-menus{
  width: 220px;
  float:left;
}
.menu_preview_area .sub_pre_menu_inner {
  display: block;
  border-top: 1px solid #e7e7eb;
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 50px;
  white-space: nowrap;
  word-wrap: normal;
  cursor: pointer;
}

.pre_menu_item {
  position: relative;
  float: left;
  line-height: 38px;
  text-align: center;
  font-size: 14px;
}
.box1,
.rel {
  position: relative;
}

.menu_form_bd {
  font-size: 14px;
}

.pre_menu_item a.current {
  border: 1px solid #44b549;
  line-height: 48px;
  background-color: #fff;
  color: #44b549;
}

.pre_menu_item:nth-child(n + 2) {
  border-left: 1px solid #e7e7eb;
}

.menu_preview_area {
  float: left;
  margin-right: 12px;
  position: relative;
}

.mobile_bd {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 64px;
}
.menu_form_area {
  display: table-cell;
  vertical-align: top;

  float: none;
  width: auto;
  *display: block;
  *zoom: 1;
}
.xdicon {
  width: 100%;
  height: 100%;
}

.mobile_menu_preview {
  position: relative;
  width: 416px;
  user-select: none;
  height: 738px;
  background: transparent url("../../assets/icons/wxbg.png") no-repeat 0 0;
  background-size: 100% 64px;
  background-position: 0 0;
  border: 1px solid #e7e7eb;
}
.toolbar-area {
  padding-top: 15px;
}
.avatar-uploader,
.avatar-uploader-icon {
  width: 50px;
  height: 50px;
  line-height: 50px;
  box-sizing: border-box;
  vertical-align: middle;
  display: inline-block;
}

.mobile_menu_preview .mobile_hd {
  color: #fff;
  text-align: center;
  padding-top: 35px;
  font-size: 15px;
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  margin: 0 30px;
}

.menu_preview_area .pre_menu_list {
  position: absolute;
  bottom: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  left: 0;
  right: 0;
  border-top: 1px solid #e7e7eb;
  background: transparent url(../../assets/wechat/bg_mobile_foot.png) no-repeat
    0 0;
  background-position: 0 0;
  background-repeat: no-repeat;
  padding-left: 43px;
}

.onlyone-li {
  float: none;
  width: auto;
  overflow: hidden;
  *zoom: 1;
  *overflow: visible;
}

.menu_preview_area .pre_menu_list .pre_menu_item .pre_menu_link {
  border: 1px solid #44b549;
  color: #44b549;
}

.pre_menu_item a {
  display: block;
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  color: #616161;
  text-decoration: none;
}

.menu_preview_area .icon14_menu_add {
  background: url(../../assets/wechat/index.png) 0 0 no-repeat;
  width: 14px;
  height: 14px;
  vertical-align: middle;
  display: inline-block;
  margin-top: -2px;
}

.menu_preview_area .pre_menu_list.no_menu .icon14_menu_add {
  background: url(../../assets/wechat/index.png) 0 -18px no-repeat;
}

.menu_preview_area .pre_menu_item {
  line-height: 50px;
}

.sub_pre_menu_box .arrow {
  position: absolute;
  left: 50%;
  margin-left: -6px;
}

.menu_preview_area .sub_pre_menu_box {
  bottom: 60px;
  background-color: #fafafa;
  border-top-width: 0;
}

.sub_pre_menu_box {
  position: absolute;
  bottom: 50px;
  left: 0;
  width: 100%;
  border: 1px solid #d0d0d0;
  background-color: #fff;
}

.sub_pre_menu_box .arrow_out {
  bottom: -6px;
  display: inline-block;
  width: 0;
  height: 0;
  border-width: 6px;
  border-style: dashed;
  border-color: transparent;
  border-bottom-width: 0;
  border-top-color: #d0d0d0;
  border-top-style: solid;
}

.sub_pre_menu_box .arrow_in {
  bottom: -5px;
  display: inline-block;
  width: 0;
  height: 0;
  border-width: 6px;
  border-style: dashed;
  border-color: transparent;
  border-bottom-width: 0;
  border-top-color: #fafafa;
  border-top-style: solid;
}

.sub_pre_menu_box .arrow_in {
  bottom: -5px;
  display: inline-block;
  width: 0;
  height: 0;
  border-width: 6px;
  border-style: dashed;
  border-color: transparent;
  border-bottom-width: 0;
  border-top-color: #fafafa;
  border-top-style: solid;
}

.sub_pre_menu_box .arrow_out {
  bottom: -6px;
  display: inline-block;
  width: 0;
  height: 0;
  border-width: 6px;
  border-style: dashed;
  border-color: transparent;
  border-bottom-width: 0;
  border-top-color: #d0d0d0;
  border-top-style: solid;
}

.pre_menu_item .icon_menu_dot {
  background: url(../../assets/wechat/index.png) 0 -36px no-repeat;
  width: 7px;
  height: 7px;
  vertical-align: middle;
  display: inline-block;
  margin-right: 2px;
  margin-top: -2px;
  *margin-top: 0;
}

.menu_form_area:after {
  content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
  visibility: hidden;
  clear: both;
  height: 0 !important;
  display: block;
  line-height: 0;
}

.portable_editor.to_left {
  padding-left: 12px;
}

.portable_editor {
  position: relative;
}

.menu_form_area .editor_inner {
  height: 738px;
  box-sizing: border-box;
  padding-bottom: 20px;
}

.portable_editor .editor_inner {
  padding: 0 20px 5px;
  background-color: #f4f5f9;
  border: 1px solid #e7e7eb;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}

.menu_form_hd {
  padding: 15px 0;
  font-size: 14px;
  border-bottom: 1px solid #e7e7eb;
}

.global_mod.float_layout .global_info {
  float: left;
}

.global_mod .global_extra {
  text-align: right;
}

.global_mod .global_extra a {
  color: #576b95;
}

.global_mod.float_layout:after {
  content: "\200B";
  display: block;
  height: 0;
  clear: both;
}

.menu_form_hd h4 {
  font-weight: 400;
  padding: 0;
  margin: 0;
}

.tips_global {
  color: #8d8d8d;
}

.menu_form_area .msg_sender_tips {
  padding-top: 15px;
}

.portable_editor .frm_control_group {
  margin-top: 30px;
  margin-bottom: 30px;
  padding-bottom: 0;
}

.portable_editor .frm_control_group {
  margin-bottom: 10px;
}

.portable_editor.to_left .editor_arrow_out {
  left: 0;
}

.portable_editor.to_left .editor_arrow_wrp {
  left: 0;
  top: 20px;
}

.menu_form_area .portable_editor.to_left .editor_arrow_wrp {
  top: 645px;
}

.portable_editor.to_left .editor_arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-width: 12px;
  border-style: dashed;
  border-color: transparent;
  border-left-width: 0;
  border-right-color: #e7e7eb;
  border-right-style: solid;
}

.portable_editor .editor_arrow_wrp,
.portable_editor .editor_arrow {
  position: absolute;
}

.portable_editor.to_left .editor_arrow_in {
  left: 1px;
  border-right-color: #f4f5f9;
}

.toolbar {
  text-align: center;
  padding: 30px;
}
.menu_holder {
  overflow: hidden;
  padding: 20px 0;
}
.label {
  float: left;
  width: 100px;
  padding-top: 11px;
}
.label-content {
  width: auto;
  overflow: hidden;
}

.label-content-input {
  width: 400px;
}
.label-content-tip {
  color: #8d8d8d;
  padding-top: 10px;
}
.label-content-error {
  color: red;
  padding-top: 10px;
}
.label-n {
  padding: 0;
}
.edit-box-tip {
  color: #8d8d8d;
  padding-bottom: 20px;
}
.edit-box {
  background-color: #fff;
  padding: 20px;
}

$swiper1Height: 4.14rem;

.swiper {
  height: $swiper1Height;
  position: relative;
  z-index: 100;
  margin-bottom: 0.2rem;
}

.swiper .mint-swipe-indicators {
  bottom: 1.2rem;
}

.banners {
  //   height: 4.44rem;
  height: $swiper1Height;
}

.banners2 {
  height: 4.0458rem;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.banners2 img {
  height: 4.0458rem;
  width: 100%;
}

.swpier2 {
  height: 4.0458rem;
  position: absolute;
  z-index: 100;
  bottom: 0;
  left: 0;
  width: 100%;
}

.bottombar-img {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("../../assets/icons/bottombar@2x.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: left bottom;
  z-index: 100;
  height: 1.04rem;
  width: 100%;
}

.banners img {
  height: $swiper1Height;
  width: 100%;
}

.box1 {
  font-size: 0.3467rem;
  border: 1px dashed transparent;
  box-sizing: border-box;
  color: #333333;
  // justify-content: space-between;
  text-align: center;
  padding: 0.2rem 0;
  width: 25%;
  float: left;
  // & > div {
  //   flex: 1;
  //   width: 100%;
  // }
  .box1-num {
    font-size: 0.4533rem;
    color: #f20b01;
  }
  .box1-txt {
    padding-top: 0.2133rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
.img-edit-area {
  padding: 20px 0 10px 0;
}
.hr15 {
  height: 0.36rem;
}

.topbar-img {
  width: 100%;
  position: absolute;
  bottom: -0.15rem;
  height: 1.04rem;
  left: 0;
  background-image: url("../../assets/icons/topbar@2x.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: left top;
}
.avartar-img-wrapper {
  width: 1.12rem;
  height: 1.12rem;
}
.avartar-img {
  width: 1.12rem;
  height: 1.12rem;
  border: solid 2px #036b46;
  border-radius: 50%;
}

div.ib {
  position: relative;
  z-index: 1000;
}

.horizontal-center {
  // display: flex;
  position: absolute;
  left: 0;
  right: 0;
  top: 4.75rem;
  bottom: 4.0458rem;
  // flex-direction: column;
  // justify-content: center;
}
.horizontal-center::after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  clear: both;
}
</style>
